<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="./css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">所有商品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="javascript:;">列表三</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">云市场</a></li>
                <li class="layui-nav-item"><a href="">发布商品</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">


            <div style="margin-bottom: 5px;">
            </div>

            <div class="layui-btn-group demoTable">
                <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
                <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
                <button class="layui-btn" data-type="isAll">验证是否全选</button>
            </div>

            <table id="configTable" class="layui-table" lay-filter="config">

            </table>

            <script type="text/html" id="barConfig">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>


        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<div id="dfsdds"><h3>woshiyigecehis</h3></div>
<script src="./layui.js"></script>
<script>
    layui.config({
        version: '1515376178738' //为了更新 js 缓存，可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
        var laydate = layui.laydate //日期
                , layer = layui.layer //弹层
                , table = layui.table //表格
                , carousel = layui.carousel //轮播
                , upload = layui.upload //上传
                , element = layui.element; //元素操作

        //向世界问个好
        layer.msg('Hello World');

        //width 不能都配数值 要不会有空余或是隐藏其他列
        table.render({
            elem: '#configTable'
            , url: '/conf/config/page.htm' //数据接口
            , page: true //开启分页
            , where: {serverId: 1} //自己的参数
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'configKey', title: 'KEY', width: 100}
                , {field: 'configValue', title: 'VALUE', width: 100}
                , {field: 'status', title: '状态', width: 80, sort: true}
                , {field: 'updateUser', title: '用户', width: 90}
                , {field: 'updateTime', title: '更新时间', width: 170, sort: true}
                , {field: 'configDesc', title: '描述', width: 120}
                , {field: 'serverBelong', title: '所属', sort: true}
                , {field: 'configVersion', title: '版本', sort: true}
                , {fixed: 'right', title: '操作', width: 165, align: 'center', toolbar: '#barConfig'}
            ]]
        });
//
        //监听工具条
        table.on('tool(config)', function (obj) { //注：tool是工具条事件名 , tool里面的值是lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作' + data);
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') {
                layer.open({
                    title: '编辑' + " " + data.configKey,
                    skin: 'layui-layer-rim', //加上边框
                    type: 0,
                    area: 'auto',
                    offset: 'auto',
                    content: '<div class="site-text site-block">' +
                    '<form id="formEdit" class="layui-form" action="">' +
                    '<div class="layui-form-item">' +
                    '<label class="layui-form-label">ID</label>' +
                    '<div class="layui-input-block">' +
                    '<input id = "formId" disabled type="text" name="title" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" value=' + data.id + '>' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-form-item">' +
                    '<label class="layui-form-label">KEY</label>' +
                    '<div class="layui-input-block">' +
                    '<input disabled type="text" name="title" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"  value=' + data.configKey + '>' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-form-item">' +
                    '<label class="layui-form-label">VALUE</label>' +
                    '<div class="layui-input-block">' +
                    '<input lay-filter="formValue" id = "formValue" type="text" name="title" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"  value=' + data.configValue + '>' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-form-item">' +
                    '<label class="layui-form-label">状态</label>' +
                    '<div class="layui-input-block">' +
                    '<input type="text" name="title" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"  value=' + data.status + '>' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-form-item">' +
                    '<label class="layui-form-label">用户</label>' +
                    '<div class="layui-input-block">' +
                    '<input disabled type="text" name="title" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"  value=' + data.updateUser + '>' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-form-item">' +
                    '<label class="layui-form-label">更新时间</label>' +
                    '<div class="layui-input-block">' +
                    '<input disabled type="text" name="title" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"  value=' + data.updateTime + '>' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-form-item">' +
                    '<label class="layui-form-label">描述</label>' +
                    '<div class="layui-input-block">' +
                    '<input disabled type="text" name="title" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"  value=' + data.configDesc + '>' +
                    '</div>' +
                    '</div>' +
                    '<div class="layui-form-item">' +
                    '<label class="layui-form-label">版本</label>' +
                    '<div class="layui-input-block">' +
                    '<input disabled type="text" name="title" required="" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" value=' + data.configVersion + '>' +
                    '</div>' +
                    '</div>' +
                    '</form>' +
                    '</div>'
                    , yes: function (index, layero) {//index 层索引//layero当前层DOM对象



                        var id = layero.find('#formValue');
                        layer.alert(id.attr('value'));


                        layer.close(index); //如果设定了yes回调，需进行手工关闭
//                        var smallSrc = layer.getChildFrame('#ImgUrl', index).attr("src");
//                        var largeSrc = layer.getChildFrame('#LargeImgUrl', index).attr("src");
//                        $.ajax({
//                            data: { "smallSrc": smallSrc, "largeSrc": largeSrc },
//                            type: 'post',
//                            dataType: 'josn',
//                            url: '/Product/ImageSrc',
//                            success: function (data) {
//                                alert(data);
//                            }
//                        });
                    }
                    , end: function () {
//                        layer.alert("END测试");
                        //location.reload();
                    }
                });
                obj.update({
                    configKey: '123'
                    , configValue: 'xxx'
                });
            }
        });
        table.on('edit(config)', function (obj) {
            var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
            layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
        });

//        //执行一个轮播实例
//        carousel.render({
//            elem: '#test1'
//            ,width: '100%' //设置容器宽度
//            ,height: 200
//            ,arrow: 'none' //不显示箭头
//            ,anim: 'fade' //切换动画方式
//        });


        //分页
//        laypage.render({
//            elem: 'pageDemo' //分页容器的id
//            , count: 100 //总页数
//            , skin: '#1E9FFF' //自定义选中色值
//            //,skip: true //开启跳页
//            , jump: function (obj, first) {
//                if (!first) {
//                    layer.msg('第' + obj.curr + '页');
//                }
//            }
//        });

//        //上传
//        upload.render({
//            elem: '#uploadDemo'
//            ,url: '' //上传接口
//            ,done: function(res){
//                console.log(res)
//            }
//        });
//
//        //底部信息
//        var footerTpl = lay('#footer')[0].innerHTML;
//        lay('#footer')[0].innerHTML = layui.laytpl(footerTpl).render({});

        element.on('formValue', function(data){
            layer.msg('触发');
        });
    });
</script>
</body>

</html>